<template>
  <router-link :to="'/activities?category=' + category.id" class="category-card">
    <div class="category-icon" :style="{ backgroundColor: category.color || '#409eff' }">
      <el-icon><component :is="getCategoryIcon(category.icon)" /></el-icon>
    </div>
    <h3 class="category-name">{{ category.name }}</h3>
    <p class="category-count">{{ category.activityCount || 0 }}个活动</p>
  </router-link>
</template>

<script>
import { 
  Campus, 
  Reading, 
  VideoPlay, 
  Music, 
  ShoppingBag, 
  Coffee, 
  Star, 
  Trophy, 
  Gift, 
  UserFilled,
  Flag,
  Briefcase,
  Balloon,
  MessageSquare
} from '@element-plus/icons-vue'

export default {
  name: 'CategoryCard',
  props: {
    category: {
      type: Object,
      required: true
    }
  },
  methods: {
    getCategoryIcon(iconName) {
      // 图标映射，根据category.icon返回对应的图标组件
      const iconMap = {
        'campus': Campus,
        'reading': Reading,
        'video': VideoPlay,
        'music': Music,
        'shopping': ShoppingBag,
        'coffee': Coffee,
        'star': Star,
        'trophy': Trophy,
        'gift': Gift,
        'user': UserFilled,
        'flag': Flag,
        'briefcase': Briefcase,
        'balloon': Balloon,
        'message': MessageSquare
      }
      // 如果没有指定图标或找不到对应的图标，返回默认图标
      return iconMap[iconName] || Briefcase
    }
  }
}
</script>

<style scoped>
.category-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: block;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
  color: white;
  font-size: 24px;
}

.category-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 6px;
}

.category-count {
  font-size: 12px;
  color: #909399;
}
</style>